<template>
	<view class="com" v-if="goods && goods.length>0">
		<view class="ct">
			商品信息
		</view>

		<view class="gul">
			<view class="gli" v-for="(item, index) in goods" :key="index">
				<image :src="$imgUrl + item.thumb" class="gimg"></image>
				<view class="gr">
					<view class="gname">
						{{ item.name }}
					</view>
					<view class="gtags">
						<view class="tags" v-if="item.mdl">
							{{item.mdl}}
						</view>
					</view>
					<view class="gprice">
						<view class="gpl">
							<text class="gpi mprice">¥</text>
							<text
								class="gnum mprice">{{ item.activity_price  }}</text>
							<!-- <text class="gptxt" v-if="item.price">原价：¥{{item.price}}</text> -->
						</view>
						<view class="gpr">
							x {{ item.count }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		goods: {
			type: Object,
			default: {}
		}
	})
	const {
		goods
	} = toRefs(props)
</script>

<style lang="scss" scoped>
	.com {
		width: 100%;
		height: auto;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx 24rpx 0;

		.ct {
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			padding-bottom: 24rpx;
		}

		.gul {
			width: 100%;
			height: auto;

			.gli {
				width: 100%;
				display: flex;
				align-items: center;
				border-bottom: 1px solid $bg_color;
				padding: 24rpx 0;

				&:last-child {
					border: none;
				}

				.gimg {
					border-radius: 8rpx;
					width: 200rpx;
					height: 200rpx;
				}

				.gr {
					flex: 1;
					min-height: 200rpx;
					padding-left: 24rpx;

					.gname {
						font-size: 26rpx;
						min-height: 64rpx;
					}

					.gtags {
						margin-top: 16rpx;

						.tags {
							display: inline-block;
							padding: 6rpx 12rpx;
							font-size: 24rpx;
							color: #000;
							background-color: $bg_color;
							border-radius: 4rpx;
							margin-right: 12rpx;
							margin-bottom: 12rpx;
						}

						.tags-act {
							color: #f00;
							background: #fff6f6;
						}
					}

					.gprice {
						width: 100%;
						height: auto;
						display: flex;
						align-items: center;
						// margin-top: 30rpx;
						justify-content: space-between;

						.gpl {
							display: flex;
							align-items: center;
						}

						.gpi {
							font-size: 20rpx;
							color: #f00;
							font-weight: bold;
							position: relative;
							top: 2rpx;
						}

						.gnum {
							font-size: 32rpx;
							font-weight: bold;
							margin-left: 4rpx;
						}

						.gptxt {
							margin-left: 24rpx;
							font-size: 22rpx;
							color: #999;
							text-decoration: line-through;
						}

						.gpr {
							font-size: 24rpx;
							color: #000;
						}
					}
				}
			}
		}
	}
</style>